<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${seo.title}"></title>
    <meta name="keywords" th:content="${seo.keyword}"/>
    <meta name="description"
          th:content="${seo.intro}"/>
    <meta name="applicable-device" content="pc,mobile">
    <link rel="shortcut icon" th:href="${company.favicon}">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/htmleaf-demo.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/bootstrap-float-label.css}"/>


    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/qhdcontent.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/content.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/menu.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/jquery.fancybox-1.3.4.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/pgwslideshow.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/dmaku.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/style.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/style-green.css}"/>

    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
</head>
<body class="font-zh-CN" style="background:url(static/images/bg-img-02.jpg) top center fixed;">

<script th:src="@{/template_2/static/js/a1portalcore.js}" type="text/javascript"></script>
<script th:src="@{/template_2/static/js/a1portal.js}"></script>
<script th:src="@{/template_2/static/js/jquery-1.7.2.min.js}"></script>
<script th:src="@{/template_2/static/js/superfish.js}"></script>
<script th:src="@{/template_2/static/js/jquery.caroufredsel.js}"></script>
<script th:src="@{/template_2/static/js/jquery.touchswipe.min.js}"></script>
<script th:src="@{/template_2/static/js/jquery.tools.min.js}"></script>
<script th:src="@{/template_2/static/js/jquery.fancybox-1.3.4.pack.js}"></script>
<script th:src="@{/template_2/static/js/pgwslideshow.min.js}"></script>
<script th:src="@{/template_2/static/js/jquery.fixed.js}"></script>
<script th:src="@{/template_2/static/js/cloud-zoom.1.0.2.min.js}"></script>
<script th:src="@{/template_2/static/js/device.min.js}"></script>
<script th:src="@{/template_2/static/js/html5media-1.2.js}"></script>
<script th:src="@{/template_2/static/js/dmaku.min.js}"></script>
<script th:src="@{/template_2/static/js/isotope.pkgd.min.js}"></script>
<script th:src="@{/template_2/static/js/custom.js}"></script>

<div id="wrapper" class="home-page">
    <div th:replace="template_2/common/header :: header"></div>
    <div class="banner">
        <a th:href="${advertisingMap.link}">
            <img th:src="${advertisingMap.picture}" th:alt="${advertisingMap.title}" width="100%">
        </a>
    </div>

    <div class="htmleaf-container" id="app">

        <div class="container" style="padding:2em 0;">
            <h1>在线留言</h1>
            <br>
            <br>
            <div class="form-group floating-control-group">
                <label>姓名</label>
                <input type="text" v-model="entity.name" class="form-control"  placeholder="姓名">
            </div>
            <div class="form-group floating-control-group">
                <label >手机号</label>
                <input type="tel" v-model="entity.phone" class="form-control"  placeholder="手机号">
            </div>
            <div class="form-group floating-control-group">
                <label >标题</label>
                <input type="text" v-model="entity.title" class="form-control"  placeholder="标题">
            </div>
            <div class="form-group floating-control-group">
                <label >需求</label>
                <textarea class="form-control" v-model="entity.demand"  rows="3"></textarea>
            </div>
            <button type="submit" style="width: 100%;font-size: 18px" @click="add()" class="btn btn-primary">提交</button>
        </div>

    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script th:src="@{/template_2/static/js/bootstrap-float-label.js}"></script>

    <script type="text/javascript">
        $(function(){
            $('.form-group').floatingLabel();
        })

    </script>
    <div th:replace="template_2/common/footer :: footer"></div>

</div>

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

<script th:inline="javascript">
    var context = "http://" + window.location.host;

    new Vue({
        el: '#app',
        data() {
            return {
                entity: {
                    phone:'',
                    name:'',
                    title:'',
                    demand:'',
                },
            }
        },
        methods: {
            add() {


                for (var key in this.entity) {
                    if (this.entity[key] == "" || this.entity[key] == null) {
                        alert("请填写全部信息，不能为空！")
                        return;
                    }
                }

                this.$http.post('/api/messageBoard/add',this.entity,{ headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                        token: "token"
                    }}).then(function(res){
                    console.log(res.ok);
                    if (res.ok){
                        alert("您的留言已收到！")
                        $('#myModal').modal('hide')
                    }
                },function(res){
                    console.log(res.status);
                });

            }
        }
    })
</script>

</body>
</html>
